<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字体图标</title>
    <!-- 导入阿里字体图标库远程地址 -->
    <!-- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4267181_pjuw2dxwn.css" /> -->

    <!-- 导入阿里字体图标本地文件 -->
    <link rel="stylesheet" href="css/iconfont.css" />
    <style>
      /* 
        页面中如何显示图片?
          1.img标签显示图片,一般中大型图片
          2.background背景显示图片,一般中大型图片
          3.字体图标来显示小图片和小图标
          4.base64图片作为补充

        字体图标 
        它是一种显示页面中各种小图标的技术

        如何使用?
        两个字体图标网站
        国内(重点):  https://www.iconfont.cn/
        国外:  https://icomoon.io/

        以阿里矢量图网站的使用为例:
        0.注册网站用户
        1.搜索选择合适的图标,然后加入购物车(不是下载)
        2.点击购物车图标,选择添加至项目,选择现有项目或者新建一个项目
        3.进入项目管理页面,可以看到所有的图标,可以对图标进行各种编辑(旋转,放大,缩小,命名...)
        4.选择工具栏上的Font class
            方式一: 适合学习,测试,调试使用
            直接点击下方产生代码,就可以产生在线链接,直接在页面中通过link导入

            方式二: 企业级使用
            下载字体图标压缩包,解压,然后把对应的css和字体文件放入到对应的文件夹中,
            必要的话修改css文件中引用字体文件的路径

            注意: 所有对项目中图标的改动,都需要重新更新链接或者下载的资源包
        5.在元素上添加字体图标的显示
            方式一: (推荐)使用class属性iconfont icon-xxxx
            方式二: 使用class属性iconfont,标签中使用对应的字符
      */
      .icon-dingwei {
        /* 注意: 字体图标操作本质上就是操作字体,所以样式都是使用字体相关的样式! */
        color: #389bff;
      }

      .icon-dingwei:hover {
        color: #125ca7;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <!-- 使用类选择器来显示图标 -->
    <p class="iconfont icon-repare">预约维修服务</p>
    <p class="iconfont icon-7tianwuliyoutuihuo">7天无理由退货</p>
    <p class="iconfont icon-15tianwuliyoutuihuo">15天免费换货</p>
    <p class="iconfont icon-liwuhuodong">满69元包邮</p>
    <p class="iconfont icon-dingwei">1100余家售后网点</p>

    <!-- 使用字符来显示图标 -->
    <em class="iconfont"></em>预约维修服务 <em class="iconfont"></em>7天无理由退货
    <em class="iconfont"></em>15天免费换货 <em class="iconfont"></em>满69元包邮
    <em class="iconfont"></em>1100余家售后网点
  </body>
</html>
